import React,{Component} from 'react';
import set from './set.module.css'
import { Select,Button,Table,Input, Space, Modal,Tag } from 'antd';
import getday from '../../util/getday'
const { Option } = Select;
class SetTemplate extends Component{
    state={
        columns:[
            {
              title: '编号',
              dataIndex: 'id',
              key: 'id'
            },
            {
              title: '模板名称',
              dataIndex: 'title',
              key: 'title',
            },
            {
              title: '模板类型',
              dataIndex: 'type',
              key: 'type',
              render: value =>value=='test'?'考试模板':'成绩模板'
            },
            {
              title: '创建时间',
              dataIndex:'createTime',
              key: 'createTime',
              render: value => getday(value*1)
            }, 
            {
                title: '操作',
                key: 'action',
                render:(value,item)=><Tag color="processing" onClick={()=>this.upload(item.download)}>下载</Tag>
              },
          ],
          data :'',
          visible: false,
          txtUrl:'',
          filename:'',
          filename2:'',
          filetype:'all'
    }
    //下载
    upload =download => window.location.href = "http://192.168.1.141:8000"+download;
    //弹窗出现
    showModal = () => {
      this.setState({
        visible: true,
      });
    };
    //点击确定时
    handleOk = e => {
        const {filename2,txtUrl,filetype}=this.state;
        
        if(filetype=='all'){
            this.$message.warning('请选择类型')
            return
        }
        console.log(filename2,txtUrl)

        this.$httpReq(this.$api.templateadd({title:filename2,download:txtUrl[0],type:filetype}),res=>{
               const {code,msg}=res
               if(code){
                    this.$message.success(msg)
                    this.$httpReq(this.$api.templatelist(),res=>{
                      const {code,data}=res;
                      console.log(res.data)
                      if(code){
                        this.setState({data:data})
                      }
                 })
               }
        })
      this.setState({
        visible: false,
        filename2:'',
        filetype:'all'
      });
    };
   //点击取消时
    handleCancel = e => {
      this.setState({
        visible: false,
        filename2:'',
        filetype:'all'
      });
    };
    //上传文件获得文件的路径
    parturl=files=>{
        // 向后台发送文件
        let data = new FormData();
        data.append(localStorage.user,files);
        // 进行异步请求
        this.$httpReq(this.$api.templateupload(data,{"Content-Type":"multipart/form-data"}),res=>{
            this.setState({txtUrl:[res.data]})
        })
       
    }
    //模板类型
    handleChange1=value=>{
      this.setState({filetype:value})
    }
    handleChange2=value=>{
      this.setState({filetype:value})
    }
    //搜索
    serachbtn=()=>{
      const {filename,filetype}=this.state;
      this.$httpReq(this.$api. searchTemplateList({title:filename,type:filetype}),res=>{
            const {data,code}=res
            if(code){
                this.setState({data:data})
            }
    })
     
    }
    render(){
        const {columns,data,txtUrl,filename,filetype,filename2}=this.state
        return <div className={set.box}>
               <div style={{padding:'15px 0px',position:'relative'}}>
                   模板名称：<Input placeholder="请输入关键字" style={{ width: 220,marginRight:'40px' }} value={filename} onChange={e=>this.setState({filename:e.target.value})}/>
                   模板类型： <Select value={filetype} style={{ width: 220 }} onChange={this.handleChange1}>
                                 <Option value="all">全部</Option>
                                 <Option value="test">考试模板</Option>
                                 <Option value="grade">成绩模板</Option>
                             </Select>
                  <Button type="primary" className={set.serachbtn} onClick={()=>this.serachbtn()}>搜索</Button>
               </div>
               <div className={set.serachp}>
                   <span className={set.serachspan} onClick={this.showModal}>上传模板</span>
               </div>
               <Table columns={columns} dataSource={data}  pagination={{
                       pageSize:6
               }}/>
              <Modal
                    title="上传模板"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确定"
                    cancelText="取消"
              >
                <div style={{margin:'10px'}}>模板名称：<Input placeholder="请输入关键字" style={{ width: 220,marginRight:'40px' }} value={filename2} onChange={e=>this.setState({filename2:e.target.value})}/></div>
                <div style={{margin:'10px'}}>模板类型： <Select value={filetype} style={{ width: 215 }} onChange={this.handleChange2}>
                                                          <Option value="all">未选择</Option>
                                                          <Option value="test">考试模板</Option>
                                                          <Option value="grade">成绩模板</Option>
                                                      </Select></div>
                {
                    txtUrl.length?<div>上传成功：文件路径为{txtUrl[0]}</div>:<input type="file" onChange={(e)=>this.parturl(e.target.files[0])}/>
                }
              </Modal>
        </div>
    }
    componentDidMount(){
      this.$httpReq(this.$api.templatelist(),res=>{
           const {code,data}=res;
           if(code){
             console.log(res)
             this.setState({data:data})
           }
      })
    }
}
export default SetTemplate
